import { Form, Select, Input, Button, Table, message, Drawer } from 'antd';
import React, { useEffect, useState } from 'react';
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../../api/zzachieve'
import * as service1 from '../../../../api/zzachieve1'
import "./AchieForthOne.scss"
import type { RadioChangeEvent } from 'antd';
import { Radio } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import { useNavigate } from 'react-router-dom';
interface Props {

}
interface DataType {
    id: number,
    key: string;
    img: string;
    link: string;
    alt: string;
}

function AchieFirst(props: Props) {



    const { Option } = Select;

    let [tabledata, setTableData] = useState([])

    const [messageApi, contextHolder] = message.useMessage();

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const { Search } = Input;



    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;

    const onFinish = (values: any) => {
        console.log('Success:', values);

        // service.people_standadd(values).then(res => {
        service1.people_standadd(values).then(res => {
            console.log(res)

            if (res.status == 201) {
                messageApi.open({
                    type: 'success',
                    content: '添加成功',
                });
                navigate('/index/achievements/achieforthone')
            }


        })
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };


    // useEffect(() => {
    //     service.people_standard().then((ok) => {
    //         console.log(ok.data);
    //         ok.data.map((item: any) => {
    //             item.key = item.id
    //         })
    //         setTableData(ok.data)
    //     })
    // }, [])
    useEffect(() => {
        service1.people_standard().then((ok) => {
            console.log(ok.data);
            ok.data.map((item: any) => {
                item.key = item.id
            })
            setTableData(ok.data)
        })
    }, [])



    const columns: ColumnsType<DataType> = [
        {
            title: '指标名称',
            dataIndex: 'name',
            key: "name"
        },
        {
            title: '指标类型',
            dataIndex: 'type',
            key: "type"
        },
        {
            title: '指标规则',
            dataIndex: 'rules',
            key: "rules",
            render: (_, record) => {
                return <>
                    <div>指标规则</div>
                </>
            }
        },
        {
            title: '上限',
            dataIndex: 'top',
            key: "top",
            render: (_, record) => {
                return <>
                    <div>80</div>
                </>
            }
        },
        {
            title: '备注',
            dataIndex: 'mores',
            key: "mores",
            render: (_, record) => {
                return <>
                    <div>-</div>
                </>
            }
        },
        {
            title: '操作',
            dataIndex: 'e',
            key: "e",
            render: (_, record) => {
                return <>
                    <a >编辑</a>
                    <a onClick={() => { handlestanddel(record.id) }}>删除</a>
                </>
            }
        },
    ];
    // let handlestanddel = async (id: any) => {
    //     let res = await service.people_standdel({ id: id })
    //     console.log(res);
    //     if (res.status == 200) {
    //         messageApi.open({
    //             type: 'success',
    //             content: '已删除',
    //         });
    //     }
    // }
    let handlestanddel = async (id: any) => {
        let res = await service1.people_standdel({ id: id })
        console.log(res);
        if (res.status == 200) {
            messageApi.open({
                type: 'success',
                content: '已删除',
            });
        }
    }
    const [open, setOpen] = useState(false);

    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };
    let handleopen = () => {

    }
    const [value, setValue] = useState(1);

    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    // let onSearch = async (value: string) => {
    //     let res = await service.people_standsearach({ name_like: value })
    //     console.log(res.data);
    //     res.data.map((item: any) => {
    //         item.key = item.id
    //     })
    //     setTableData(res.data)
    // }
    let onSearch = async (name: string) => {
        let res = await service1.people_standsearach({ name })
        console.log(res.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data)
    }

    const navigate = useNavigate()



    return (
        <div className='first'>
            <div className='top'>
                <div className='colo'></div>
                <div className='text'>指标库</div>
            </div>
            <div className='middle'>
                <div className='left'>
                    <Form

                    >
                        <Form.Item name="type" label="周期类型" rules={[{ required: false }]}>
                            <Select

                                placeholder="请选择"
                                allowClear
                            >
                                <Option value="加分项">加分项</Option>
                                <Option value="减分项">减分项</Option>
                                <Option value="普通项">普通项</Option>

                            </Select>
                        </Form.Item>
                    </Form>
                    <Search placeholder="请输入关键字"
                        onSearch={onSearch}
                        style={{ width: 200 }} />
                </div>
                <div className='right'>
                    <Button type="primary" onClick={showDrawer}>+新增指标</Button>
                    <Button type="primary" ghost>导入</Button>
                    <Button type="primary" ghost>导出</Button>
                    <Button type="primary" ghost>批量删除指标</Button>
                </div>
                <Drawer
                    title="新增考核指标"
                    placement="right"
                    onClose={onClose} open={open}
                    width="450px"
                >
                    <Form
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}

                    >
                        <Form.Item label="指标类型" name="type">
                            <Radio.Group onChange={onChange} value={value} name="type" >
                                <Radio name="type" value={1}>普通项</Radio>
                                <Radio name="type" value={2}>减分项</Radio>
                                <Radio name="type" value={3}>加分项</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="指标名称" name='name' rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="type" label="指标类别" rules={[{ required: true }]}>
                            <Select
                                placeholder=""
                                allowClear
                            >
                                <Option value="业绩">业绩</Option>
                                <Option value="服务">服务</Option>
                                <Option value="售前指标">售前指标</Option>
                                <Option value="售中指标">售中指标</Option>
                                <Option value="售后指标">售后指标</Option>
                                <Option value="产品测试指标">产品测试指标</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="  考核规则" name='rules' >
                            <TextArea rows={4} />
                        </Form.Item>
                        <Form.Item label="  备注" name='mores' >
                            <Input />
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 1, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                保存
                            </Button>
                        </Form.Item>
                    </Form>
                </Drawer>
            </div>
            <div className='from'>
                <Table rowSelection={rowSelection} columns={columns} dataSource={tabledata} />
            </div>
            {contextHolder}
        </div>
    );
}
interface Props {

}
export default AchieFirst;